<template>
	<view id="apps">


		<!-- title -->
		<view class="title">
			<text>注册</text>
		</view>


		<!-- form -->
		<view class="form">
			<view class="form_item mob">
				<text>+86</text>
				<input v-model="mobile" placeholder="请输入手机号" type="text" placeholder-class="placeholder">
			</view>
			<view class="form_item code">
				<text v-if="!isSend" @click="getVerCode">获取验证码</text>
                <text v-else>重新发送{{ timeNum }}S</text>
				<input v-model="sms_captcha" placeholder="请输入短消息验证码" type="text" placeholder-class="placeholder">
			</view>
			<view class="form_item">
				<text>设置密码</text>
				<input v-model="password" type="text" password="true" placeholder="6-20位数字+字母或符号组合" placeholder-class="placeholder">
			</view>
			<view class="form_item">
				<text>确认密码</text>
				<input v-model="again_password" type="text" password="true" placeholder="6-20位数字+字母或符号组合" placeholder-class="placeholder">
			</view>
			<view class="form_item">
				<text>邀请码</text>
				<input v-model="parent_id" type="text" placeholder="请输入邀请码" placeholder-class="placeholder">
			</view>

			<!-- 须知 -->
			<view class="ckbox" v-if="detail.agreement_name || detail.declare_name">
				<label>
					<checkbox value="cb" :checked="agree" @click="agree = !agree"/>
					<!-- <text class="ck"></text> -->
				</label>
				<view class="copyright">
					<text>已阅读并同意</text>
					<text v-if="detail.agreement_name" @click="toRule('agreement')" class="link">《{{detail.agreement_name}}》</text>
					<text v-if="detail.declare_name">和</text>
					<text @click="toRule('declare')" v-if="detail.declare_name" class="link">《{{detail.declare_name}}》</text>
				</view>
			</view>

		</view>
		<!-- btns -->
		<view class="btns">
			<button type="button" @click="register">立即注册</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";

	export default {
		name: "index",
		data() {
			return {
				pic_captcha: '',
				mobile: '',
				sms_captcha: '',
				parent_id: '',
				password: '',
				again_password: '',				
				validate_code_id: '',
				imageUrl: '',
				agree: false,
				isSend: false,
				timeNum: 60,
				timeIng: 0,
				detail: {
					agreement_name: '',
					declare_name: '',
				}
			}
		},
		computed: {
			...mapGetters({
				getSign: 'user/sign',
			})
		},
		onLoad() {
			this.$commonLoad.onload();
			this.parent_id = this.$storage.getStorageSync('parent_id');
			this.getDetail();
			this.getImageUrl();
		},
		methods: {
			toRule(string) {
				this.$store.dispatch('user/sign', {
					mobile: this.mobile,
					validate_code_id: this.validate_code_id,
					sms_captcha: this.sms_captcha,
				});
				let title = string == 'agreement' ? this.detail.agreement_name : this.detail.declare_name;
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.registered.register_data)}&key=` +
						string + `&title=` + title,
				});
			},
			getDetail: function() {
				this.$request({
					url: this.$api.registered.register_data,
				}).then(response => {
					if (response.code === 0) {
						this.detail = response.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			},
			getVerCode: function() {
				console.log('getVerCode');
				this.timeNum = 60;
				this.$request({
					url: this.$api.registered.sms,
					method: "post",
					data: {
						mobile: this.mobile
					}
				}).then(response => {
					if (response.code === 0) {
						this.isSend = true;
						this.validate_code_id = response.data.validate_code_id;
						this.change();
					} else {
						// this.getImageUrl();
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			},
			getImageUrl: function() {
				this.$request({
					url: this.$api.registered.captcha,
					data: {
						refresh: true
					}
				}).then(response => {
					this.imageUrl = response.url;
				});
			},
			change: function() {
				clearInterval(this.timeIng);
				this.timeIng = setInterval(() => {
					this.timeNum--;
					if (this.timeNum === 0) {
						clearInterval(this.timeIng);
						this.isSend = false;
					}
				}, 1000);
			},
			register: function() {
				console.log('register===');
				// if (!this.mobile || !this.pic_captcha || !this.sms_captcha) return;
				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return;
				}
				if (!this.sms_captcha) {
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码'
					})
					return;
				}	
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return;
				}
				if (!this.again_password) {
					uni.showToast({
						icon: 'none',
						title: '请输入确认密码'
					})
					return;
				}
				if (this.password != this.again_password) {
					uni.showToast({
						icon: 'none',
						title: '密码不一致，请重新输入'
					})
					return;
				}
				if (!this.agree && (this.detail.agreement_name || this.detail.declare_name)) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意注册协议'
					})
					return;
				}
				if (!this.validate_code_id) {
					uni.showToast({
						icon: 'none',
						title: '请先获取验证码'
					})
					return;
				}				
				this.$request({
					url: this.$api.registered.register,
					method: "post",
					data: {
						mobile: this.mobile,
						validate_code_id: this.validate_code_id,
						sms_captcha: this.sms_captcha,
						parent_id: this.parent_id,
						password: this.password,
						again_password: this.again_password,
					}
				}).then(response => {
					if (response.code === 0) {
						this.$storage.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
						this.$store.dispatch('user/sign', {
							mobile: '',
							validate_code_id: -1,
							sms_captcha: '',
						});
						this.$event.trigger(this.$const.EVENT_USER_LOGIN);
						uni.redirectTo({
							url: '/pages/user-center/user-center'
						});
					} else {
						this.getImageUrl();
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			}
		},
		beforeDestroy() {
			clearInterval(this.timeIng);
		},
		watch: {
			getSign: {
				handler(newVal) {
					this.validate_code_id = newVal.validate_code_id;
					this.sms_captcha = newVal.sms_captcha;
					this.mobile = newVal.mobile;
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<!-- <style scoped>
    .bd-registered {
        min-height: 100vh;
        background-color: #ffffff;
        padding: 46upx 42upx;

    }
    .bd-item {
        height: 100upx;
        border-bottom: 2upx solid #f4f4f4;
    }
    .bd-label {
        width: 36upx;
        height: 36upx;
        margin: 0 25upx 0 2upx;
    }
    .bd-btn {
        border-left: 1upx solid #f4f4f4;
        width: 226upx;
        height: 53upx;
        line-height: 53upx;
        font-size: 32upx;
        color: #ff4544;
        text-align: center;
    }
    .bd-image {
        width: 160upx;
        height: 67upx;

    }
    .bd-input {
        height: 36upx;
    }
    .bd-bottom {

        height: 88upx;
        line-height: 88upx;
        color: #ffffff;
        font-size: 36upx;
        border-radius: 44upx;
        margin-top: 68upx;
        text-align: center;
    }
    .bd-yes-agree {
        background: rgba(255, 69, 68, 1);
    }
    .bd-no-agree {
        background: rgba(255, 69, 68, 0.5);
    }
    .bd-agree-group {
        margin-top: 42upx;
    }
    .bd-agree {
        color: #999999;
        font-size: 28upx;
        margin-left:13upx;
    }
    .bd-color {
        color: #ff4544;
    }
    /deep/ .uni-radio-input {
        width: 35upx;
        height: 35upx;
    }
    .bd-send {
        color: rgba(255, 69, 68, 0.5);
    }
</style> -->


<style lang="scss" scoped>
	
	


	#apps {

		// display: flex;
		// flex-flow: column wrap;
		
		

		// title
		.title {
			display: block;
			text-align: left;
			padding: 74rpx;

			text {
				font-size: 56rpx;
				color: #333;
				font-weight: bold;
				box-sizing: border-box;
				position: relative;

				&::before {
					content: '';
					height: 18rpx;
					width: 100%;
					display: inline-block;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					background: $index_color;
					z-index: -1;
				}
			}
		}


		// form
		.form {
			padding: 50rpx 74rpx 74rpx;
			box-sizing: border-box;

			// form_item
			.form_item {
				height: 112rpx;
				line-height: 112rpx;
				border-bottom: 1px rgba(153, 153, 153, .2) solid;
				display: flex;
				align-items: center;
				position: relative;

				input {
					line-height: 112rpx;
					height: 112rpx;
					flex: 1;
					margin-left: 20rpx;
					font-size: 36rpx;
					color: #333;

					.placeholder {
						font-size: 28rpx;
						color: #999;
					}
					
				}

				text {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
				}

				&.code {
					text {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						font-size: 28rpx;
						color: #DE4335;
						z-index: 100;
					}

					input {
						margin-left: 0;
					}
					
					

				}
			}



			// 须知
			.ckbox {
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				text {
					font-size: 22rpx;
					color: #999;

					&.link {
						color: $index_color;
					}
				}


				/deep/ .uni-checkbox-input {
					width: 28rpx;
					height: 29rpx;
					border: 1px #d5d5d5 solid;
					border-radius: 100px;
					display: inline-block;
					position: relative;

					&.uni-checkbox-input-checked::before {
						content: '';
						border: 2px $index_color solid;
						width: 20rpx;
						height: 40rpx;
						display: inline-block;
						transform: rotate(45deg);
						border-top: 0;
						border-left: 0;
						position: absolute;
						left: 10rpx;
						top: -80%;
					}
				}


			}

		}



		// btns
		.btns {
			margin-top: 30rpx;
			padding: 0 74rpx;
			box-sizing: border-box;

			button {
				background: #DE4335;
				box-shadow: 0px 6rpx 12rpx rgba(222, 67, 53, 0.5);
				opacity: 1;
				border-radius: 44rpx;
				margin-bottom: 40rpx;
				color: #fff;
				font-weight: 36rpx;

				&.gray {
					background: #f6f6f6 !important;
					box-shadow: 0px 6rpx 12rpx rgba(246, 246, 246, 0.5);
					color: #333;
				}

				&::after {
					border: 0;
				}

				&:hover {
					opacity: .9;
				}

			}

		}




	}
</style>
